<template>
	<view class="container">
		<carHeader>
			<slot>
				<uni-nav-bar :border="false" background-color="rgba(255,255,255,0.0)"></uni-nav-bar>
			</slot>
		</carHeader>
		<view class="title">
			<view class="title1">
				你好，
			</view>
			<view class="title2">
				欢迎登录车联网服务
			</view>
		</view>
		<image class="car" src="../../static/车联网服务-00登录-01获取位置_slices/组 6.png" mode="widthFix"></image>
		<view class="main">
			<form>
				<view class="line">
					<input type="text" v-model="form.phone" placeholder="手机号" />
				</view>
				<view class="line" id="last">
					<input type="text" v-model="form.code" placeholder="验证码" />
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode" color="#5A89EC" style="width: 220rpx; height: 80%;">{{tips}}</u-button>
				</view>
				<view class="button">
					<button type="primary" @click="toLogin">登录</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: "",
					code: ""
				},
				seconds: 60,
				tips: "",
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.form.phone != null) {
					if (this.$refs.uCode.canGetCode) {
						console.log(this.form.phone);
						// 模拟向后端请求验证码
						uni.showLoading({
								title: '正在获取验证码',
							}),
							uni.request({
								url: "http://localhost:8080/carUserService/login/get?phone=" + this.form.phone
							})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.showToast({
						title: '手机号为空'
					})
				}
			
			},
			
			// 登录
			toLogin() {
				if (this.form.phone == null) {
					uni.showToast({
						title: "手机号不能为空"
					});
				} else {
					uni.request({
						url: "http://localhost:8080/carUserService/login/user",
						method: "GET",
						data: {
							phoneNumber: this.form.phone,
							code: this.form.code
						},
						success: (res) => {
							if (uni.getStorage('token') != null) {
								uni.removeStorage('token');
							}
							//判断登录成功还是失败
							if (res.data.code == 200) { //成功
								//token储存在缓存区里
								uni.setStorage({
									key: 'token',
									data: res.data.data,
									success: function() {
										uni.navigateTo({
											url: "/pages/index/index"
										})
									}
								});
							} else {
								uni.showToast({
									title: res.data.msg + "登录失败"
								});
							}
			
						}
					})
				}
			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},
			start(){}
		},
		
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
	}

	.car {
		width: 280rpx;
		position: relative;
		top: -200rpx;
		left: 450rpx;
		z-index: 2;
	}

	.main {
		background-color: white;
		height: 1000rpx;
		position: relative;
		top: -300rpx;
		border-radius: 50rpx;
		z-index: 1;
	}

	.title {
		height: 100rpx;
		position: absolute;
		top: 100rpx;
		left: 100rpx;
		color: white;
		font-weight: 700;

		.title1 {
			font-size: 50rpx;
			height: 80rpx;
		}

		.title2 {
			font-size: 40rpx;
		}
	}

	.main {
		padding-top: 100rpx;
	}

	.line {
		border-bottom: 1px solid gray;
		height: 80rpx;
		width: 80%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
	
	
		input {
			height: 80rpx;
			line-height: 80rpx;
		}
	
		image {
			width: 130rpx;
			height: 70rpx;
			position: relative;
			top: -70rpx;
			left: 425rpx;
		}
	
	}


	.button {
		width: 75%;
		margin: 40rpx auto;
	}
</style>